import React from 'react'
import injectSheet from 'react-jss'
import styles from './styles'
import { Layout, Menu, Breadcrumb, Icon } from 'antd'
import { HEADERHEIGHT, ASIDEWIDTH } from '@/script/config'
const { SubMenu } = Menu
const { Header, Content, Sider } = Layout

class Main extends React.Component {
  render() {
    const { classes, } = this.props
    return (
      <Layout>
        <Header className={classes.AppHeader}>
          <div className={classes.Logo}>博客系统</div>
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['1']}
            style={{ lineHeight: `${HEADERHEIGHT}px`, }}>
            <Menu.Item key="1">导航1</Menu.Item>
            <Menu.Item key="2">导航2</Menu.Item>
            <Menu.Item key="3">导航3</Menu.Item>
          </Menu>
        </Header>
        <Layout>
          <Sider
            width={ASIDEWIDTH}
            style={{ backgroundColor: '#fff' }}>
            <Menu
              mode="inline"
              defaultSelectedKeys={['1']}
              defaultOpenKeys={['sub1']}
              style={{ height: '100%', borderRight: 0}}>
              <SubMenu key="sub1" title={<span><Icon type="user"/>子目录1</span>}>
                <Menu.Item key="1">option1</Menu.Item>
                <Menu.Item key="2">option2</Menu.Item>
              </SubMenu>
              <SubMenu key="sub2" title={<span><Icon type="laptop"/>子目录2</span>}>
                <Menu.Item key="3">option1</Menu.Item>
                <Menu.Item key="4">option2</Menu.Item>
              </SubMenu>
            </Menu>
          </Sider>
          <Content style={{ padding: '0 20px 20px', minHeight: 280 }}>
            正文内容
          </Content>
        </Layout>
      </Layout>
    )
  }
}

export default injectSheet(styles)(Main)
